<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>寻ta千百度-${(msg.title)!"灰色手提包丢失"} </title>
		<#--<script type="text/javascript" src="js/jquery-3.3.0.js" ></script>
		<script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
		<link type="text/css" rel="stylesheet" href="css/xunwu.css"/>
		<link rel="stylesheet" href="/css/mystyle.css" />
		<link type="text/css" rel="stylesheet" href="/css/constant.css"/>-->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script type="text/javascript" src="js/jquery-3.3.0.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" href="/css/button.css">
		<link rel="stylesheet" href="/css/mystyle.css" />
		<link type="text/css" rel="stylesheet" href="/css/constant.css"/>
		<link type="text/css" rel="stylesheet" href="css/xunwu.css"/>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
		<style>
			#message table tr td:first-child{
				text-align: right;
			}
			.empty{
				height: 10px;
			}
		</style>
	</head>
	<body>
		<div id="settled"></div>
		<div id="content">
			<div style="width: 100%; height: 30px; border-bottom: #DEDEDE 2px solid; background: url(img/span_bg.bmp) repeat-x;">
				<img src="img/未标题-1.png" style="width: 20px;height: 20px;margin-top: 5px;float: left;"/>
				<span style="font-weight: 100;font-size: 16px;color:#1E7ACE; line-height: 30px;">${type!"寻物启事"}</span>
			</div>
			<h2 align="center">${(msg.title)!"灰色手提包丢失"}</h2>
			<p align="center">发布时间：<span>${(msg.createTime?string("yyyy-MM-dd HH:mm:ss"))!.now}</span> 浏览量 <span>${(msg.views)!"54"}</span> 当前状态：<span style="color: red;">寻找中...</span></p>
			<br />
			<div id="message" style="width: 700px; border: 2px red dashed; margin: 0 auto;">
				<table>
					<tr>
						<td style="width: 80px;">物品种类：</td>
						<td colspan="3">${(msg.category)!"其他"}</td>
					</tr>
					<tr class="empty"></tr>
					<tr>
						<td>详细描述：</td>
						<td colspan="3">
                            <div style="min-height:200px;width:600px;background-color:#f1f1f1;">
								${(msg.detail)!"暂无详细描述..."}
                            </div>
						</td>
					</tr>
					<tr class="empty"></tr>
					<tr>
						<td>酬谢方式：</td>
						<td colspan="3" style="color: red;">
							<#assign way = "">
							<#if msg.thanks==1>
								<#assign way=way+"通过平台感谢信酬谢">
							</#if>
							<#if way!=""&&msg.promise==1>
								<#assign way=way+"+">
							</#if>
							<#if msg.promise==1>
								<#assign way=way+"酬金【"+msg.remuneration+"】">
							</#if>
							${way}
						</td>
					</tr>
					<tr class="empty"></tr>
					<tr>
						<td>
							<#if msg.type==3>
								拾取地点：
							<#else>
								丢失地点：
							</#if>
						</td>
						<td colspan="3">${(msg.lostPlace)!""}</td>
					</tr>
					<tr class="empty"></tr>
					<tr>
						<td>
							<#if msg.type==3>
								拾取时间：
							<#else>
								丢失时间：
							</#if>
						</td>
						<td colspan="3">${(msg.lostTime?string("yyyy-MM-dd HH:mm:ss"))!.now}</td>
					</tr>
					<tr class="empty"></tr>
					<tr>
						<td>联系地址：</td>
						<td colspan="3">${(msg.address)!""}</td>
					</tr>
					<tr class="empty"></tr>
					<tr>
						<td>联系人：</td>
						<td>${(msg.contactPerson)!""}</td>
						<td align="right">手机：</td>
						<td style="width: 290px;">${(msg.mobile)!""}</td>
					</tr>
					<tr class="empty"></tr>
					<tr>
						<td>邮箱：</td>
						<td>${(msg.email)!""}</td>
						<td align="right">QQ：</td>
						<td style="width: 290px;">${(msg.qq)!""}</td>
					</tr>
				</table>
			</div>
		</div>
		<div>
			<div id="comment" class="m-container-small m-padded-tb-large animated tada">
				<div class="ui container">
					<!--                留言区域-->
					<div class="ui bottom attached segment" style="width:960px;margin-left:70px" >
						<div id="comment-container" class="ui teal segment">
							<div id="commentList" >

							</div>
						</div>
						<#if Session.user??>
						<div id="comment-form" class="ui form">
							<input type="hidden" name="userId" value="${Session.user.id}">
							<input type="hidden" name="username" value="${Session.user.username}">
							<input type="hidden" name="goodsId" value="${msg.id}" >
							<input type="hidden" name="parentComment.id" value="-1">
							<input type="hidden" name="parentname">
							<div class="field">
								<textarea name="content" placeholder="请输入评论信息..."></textarea>
							</div>
							<div class="fields">
								<div class="field m-margin-bottom-small m-mobile-wide">
									<button style="margin-left: 500px" id="commentpost-btn" type="button" class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
								</div>
							</div>
						</div>
						</#if>
					</div>
				</div>
			</div>
		</div>
		<div id="footer">
			<h1 style="color:#4d8bbc; margin-bottom:10px">Convenient&nbsp;<span style="color:#999">Yourself</span></h1>
			<p style="color:#999">每一个失物的背后，都是一颗急切的心！</p><br>
			<p style="color:#999">创建美好社会，文明你我他！</p>
			<br />
			<p style="color:#999" class="footer3">Copyright &copy;2020&nbsp;&nbsp;邮政编码：334700</p><br />
		</div>

		<script>
			$("#settled").load("/loadConstant");
			$(function () {
				$.post(
						"/comments?goodsId=${msg.id}",
						function (data) {
							$("#commentList").empty();
							$("#commentList").append(data)
						}
				)

			})
			function removeComment(id){
				$.post(
						"/removeComment",
						{"id":id},
						function (data) {
							if(data=='true') {
								alert("删除成功!");
								$.post(
										"/comments?goodsId=${msg.id}",
										function (data) {
											$("#commentList").empty();
											$("#commentList").append(data)
										}
								)
							}
							else alert("删除失败");
						}
				)
			}

			$('#commentpost-btn').click(function () {
					$.post(
							"/commentsToSave",
							{
								"parentId" : $("[name='parentComment.id']").val(),
								"goodsId" : $("[name='goodsId']").val(),
								"content" : $("[name='content']").val(),
								"userId" : $("[name='userId']").val(),
								"username": $("[name='username']").val(),
								"parentname": $("[name='parentname']").val()
							},
							function (data) {
								$("#commentList").empty();
								$("#commentList").append(data);
								clearContent();
							}
					)
			});


			function clearContent() {
				$("[name='content']").val('');
				$("[name='parentComment.id']").val(-1);
				$("[name='content']").attr("placeholder", "请输入评论信息...");
			}
			function reply(obj) {
				var commentId = $(obj).data('commentid');
				var commentNickname = $(obj).data('commentnickname');
				$("[name='content']").attr("placeholder", "@"+commentNickname).focus();
				$("[name='parentComment.id']").val(commentId);
				$("[name='parentname']").val(commentNickname);
				$(window).scrollTo($('#comment-form'),500);
			}

		</script>
		<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
		<script>
			L2Dwidget.init({
				"model": {
					//jsonpath控制显示那个小萝莉模型，
					//(切换模型需要改动)
//				"https://unpkg.com/(live2d-widget-model-koharu)@1.0.5/assets/(koharu).model.json"
					jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
					"scale": 1
				},
				"display": {
					"position": "right", //看板娘的表现位置
					"width": 150,  //小萝莉的宽度
					"height": 300, //小萝莉的高度
					"hOffset": 0,
					"vOffset": -20
				},
				"mobile": {
					"show": true,
					"scale": 0.5
				},
				"react": {
					"opacityDefault": 0.7,
					"opacityOnHover": 0.2
				}
			});
		</script>
	</body>

</html>
